<template>
  <div class="article-page">
    <el-card class="article-card">
      <h2 class="page-title">📖 文章</h2>

      <el-input
        v-model="keyword"
        placeholder="搜索标题关键字..."
        clearable
        class="search-box"
        @clear="fetchArticles"
        @keyup.enter.native="fetchArticles"
      />

      <el-table
        :data="filteredArticles"
        v-loading="loading"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="title" label="标题" min-width="200" />
        <el-table-column prop="author" label="作者" width="120" align="center" />
        <el-table-column prop="views" label="浏览量" width="120" align="center" />
        <el-table-column label="操作" align="center" width="160">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="$router.push(`/article/${scope.row.id}`)"
            >
              查看详情
            </el-button>
          </template>

        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog v-model="dialogVisible" :title="selectedPost.title" width="50%">
      <div class="post-content">
        <p class="meta">作者：{{ selectedPost.author }} | 浏览量：{{ selectedPost.views }}</p>
        <div class="content" v-html="selectedPost.content"></div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue"
import request from "@/utils/request"
import { ElMessage } from "element-plus"

const posts = ref([])
const loading = ref(false)
const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)
const keyword = ref("")

const dialogVisible = ref(false)
const selectedPost = ref({})

// ✅ 获取已通过的文章列表
const fetchArticles = async (page = 1) => {
  loading.value = true
  try {
    const res = await request.get("/api/posts/approved", {
      params: { page, pageSize: pageSize.value },
    })
    console.log("✅ 已通过文章列表:", res)
    if (res.code === 200) {
      posts.value = res.data.records || res.data
      console.log(res.data[0].id)
      total.value = res.data.total || res.data.length
    } else {
      ElMessage.warning(res.message || "加载失败")
    }
  } catch (err) {
    console.error(err)
    ElMessage.error("加载失败，请稍后重试")
  } finally {
    loading.value = false
  }
}

const handlePageChange = (page) => {
  currentPage.value = page
  fetchArticles(page)
}

// ✅ 关键字筛选
const filteredArticles = computed(() => {
  if (!keyword.value) return posts.value
  return posts.value.filter((p) =>
    p.title.toLowerCase().includes(keyword.value.toLowerCase())
  )
})

// ✅ 查看内容
const showContent = (post) => {
  selectedPost.value = post
  dialogVisible.value = true
}

onMounted(() => fetchArticles())
</script>

<style scoped>
.article-page {
  padding: 30px;
}

.article-card {
  padding: 20px;
  border-radius: 10px;
}

.page-title {
  margin-bottom: 20px;
  font-weight: 600;
}

.search-box {
  width: 300px;
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.post-content {
  line-height: 1.8;
  color: #333;
}

.meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.content {
  white-space: pre-wrap;
  word-break: break-word;
}
</style>
